﻿/* fonts */
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); }
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body { font-size: 16px; font-family: "Microsoft YaHei",Tahoma, "Hiragino Sans GB", STHeiti; height: 100%; overflow: hidden; }
body { background: #f2f2f2; }

a { cursor: pointer; text-decoration: none; }
a:hover, a:active, a:focus, a:visited { text-decoration: none; }
input,textarea,select { outline: none; }
ul, li { margin: 0; padding: 0; list-style: none; }
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
    display:none ! important;
}

/** common style **/
.announcements { padding: 15px; margin-bottom: 35px; font-size: 12px; color: #fff; background: #00BCD4; }
.announcements-detail { margin-top: 12px; line-height: 2; }
.m-r-12 { margin-right: 12px; }
.button-icon { font-size: 20px; padding-bottom: 4px; }
.full-width { width: 100%!important; max-width: 100%; }
.table-bar{ margin-bottom: 15px; }
.table-bar-action{ float: left;}
.table-bar-search{ float: right; }
.table-foot{ overflow: hidden; color: #888; font-size: 14px; margin-top: 8px;}
.foot-statu  { float: left; padding: 20px 0 ; }
.foot-action { float: right; }
.foot-action .material-icons{ margin-top: -3px; }
.foot-action .mdl-textfield {  width: 50px; margin: 0 12px; }
.form-title {
    font-family: "Microsoft YaHei";
    margin-top: 0;
    margin-right: 15px;
    line-height: 35px;
    border-bottom: 1px solid #757881;
}

.mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transition-property: opacity;
    visibility: visible;
    pointer-events: none;
}

.mask.in{
    pointer-events: auto;
    opacity: 1;
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}

.mask-content {
    width:300px;
    height: 100%;
    padding: 50px 20px;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    color: #424242;
    z-index: 5;
}

.mask-content h4{
    font-family: "Microsoft YaHei", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-bottom: 30px;
}

.mask-content.in{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

    /** plugin style reset 重置 **/
label { font-size: 12px; }
.form-control { padding: 3px 0; outline: none; border: none; border-bottom: 1px solid #ededed; }
.mdl-chip{ cursor: pointer; font-family: "Microsoft YaHei"; }
.mdl-radio{ width: 70px; }
.mdl-button { height: 28px; line-height: 28px; font-family: "Microsoft YaHei", Tahoma, "Hiragino Sans GB", STHeiti}
.mdl-tabs__panel{ padding: 50px;}
.material-icons { vertical-align: middle; }
.material-icons.md-12 { font-size: 0.75rem; }
.material-icons.md-14 { font-size: 0.875rem; }
.material-icons.md-16 { font-size: 1rem; }
.material-icons.md-24 { font-size: 1.5rem; }
.mdl-card { width: 100%; border-radius: 0; }
.mdl-layout__header { color: #000; }
.mdl-textfield .input-icon{
    position: absolute;
    top: 20px;
    left: -30px;
    width: 30px;
    height: 28px;
    line-height: 28px;
    text-align: left;
    color: #009688;
}

.demo-card-image{ background-size: cover; }
.demo-card-image > .mdl-card__actions {
    height: 52px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.demo-card-image > .mdl-card__actions > .img-edit{
    display: inline-block;
    font-size: 14px;
    text-decoration: underline;
    color: #fff;
    float: right;
}
.demo-card-image__filename {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.dropzone { padding: 0; }
.dropzone .dz-message { text-align: center; margin: 5.5em 0; }
.dropzone .dz-preview { width: 100%; height: 100%; margin: 0; }
.dropzone .dz-preview .dz-image { border-radius: 0; width: 100%; height: 100%; }
.dropzone .dz-preview .dz-image img { width: 100%; height: 100%; }

/** jqwidget  **/
.jqx-tree-grid-expand-button, .jqx-tree-grid-collapse-button {
    margin-top: 0;
    margin-right: 5px;
}
#contentproduct-info > span, #contenttreeGrid > span{ display: none!important;}
.jqx-fill-state-pressed-metro { color: #fff!important; }

/** webkit 浏览器滚动条重置 **/
::-webkit-scrollbar-track { background-color: #d8d8d8; }
::-webkit-scrollbar-thumb { background-color: #9c9c9c; }

/**------ Main -------**/
.main { height: 100%; }

/**------ Top -------**/
.top { text-align: center; height: 3.75rem; font-size: 0.75rem; color: #fff; background: #03A9F4; }
.logo { font-size: 1rem; width: 200px; max-width: 180px; border-right: 1px solid #0288d1; }
.search { width: 300px; margin: 0 auto; padding: 0.75rem 2rem 0 2rem; }
.searchbar { position: relative; line-height: 1; }
.item { border-left: 1px solid #0d9cdc; }

/**------ Menu ------**/
.menu { width: 200px; height: calc( 100% - 3.75rem); color: #fff; overflow: auto; overflow-x: hidden; background: #293038; }
.menu-title { display: block; color: #fff; padding: 12px 24px; font-size: 0.85rem; border-top: 1px solid #23292f; background: #3d454e; }
.menu-title:hover, .menu-title:active, .menu-title:visited, .menu-title:focus { color: #fff; }
.menu-tabs li a { display: block; width: 100%; line-height: 2.5rem; padding: 0 2rem; font-size: 0.75rem; color: #838c93; }
.menu-tabs li a:hover { color: #fff; background: #4b545f; }
.menu-tabs li.active a { color: #fff; background: #0288d1; }
.menu-option { font-size: 12px; display: block; color: #fff; height: 4rem; line-height: 4rem; text-align: center; background: #394555; cursor: pointer; }
.menu-option:hover { color: #fbed75; }
.menu::-webkit-scrollbar { width: 0; }

/**------ layout style------**/
.sidebar { height: 100%; float: left; }
.workspace { float: right; width: calc( 100% - 200px ); height: calc( 100% - 3.75rem); overflow-x: hidden; overflow-y: scroll; }
.workspace::-webkit-scrollbar { width: 8px; }
.router-view { position: relative; min-height: calc( 100% - 36px); }

/* Home */
.p-message { font-size: 0.75rem; padding: 0.5rem 1rem; background: #fff; }
.p-section { width: 100%; padding: 10px; border: 1px solid #EDEDED; background: #fff; }
.p-section-head { font-size: 12px; font-weight: 800; line-height: 36px; border-bottom: 1px solid #eee;}

/* Content */
.tool-bar { text-align: right; margin: 0.875rem 0; }

/* Product */


/* Users */
.userlist .mdl-chip {
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    background-color: #00BCD4;
    color: #fff;
    margin: 2px;
}
.usertable { padding: 20px; }
#myform .mdl-textfield{
    width: 260px;
    margin-left: 30px;
}
.img-container {
    width: 100%;
    height: 250px;
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
}
.img-container > img {
    max-width: 100%;
}
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.cropper-outer{
    overflow: hidden;
}
.cropper-preview{
    width: 120px;
    height: 120px;
    margin-right: -15px;
    overflow: hidden;
    float: left;
    border: 1px solid #ddd;
}
.cropper-bar {
    float: right;
}